import React, { useMemo, memo } from 'react';
import classnames from 'classnames';
import dayjs from 'dayjs';

import './Nav.css'

const Nav = memo(function Nav (props) {
	const { isPrevDisabled, date, prev, next } = props;
	const currentString = useMemo(() => {
		const d = dayjs(date);
		return d.format('M月D日 ') + d.locale('zh-cn').format('ddd');
	}, [date]);
	return (
		<div className="nav">
			<span onClick={prev} className={classnames('nav-prev')}>前一天</span>
			<span className="nav-current">{currentString}</span>
			<span
				onClick={next}
				className={classnames('nav-next')}
			>
				后一天
			</span>
		</div>
	)
})

export default Nav;